<template>

    <div class="head">
        <div class="box">
        <span style="color:dimgray; margin-left: 15px;" @click="onToCity">{{ store.cityName }}</span>
        <img src="../assets/zt.png" alt="" style="width: 6px;height: 3px;position: absolute;top: 25px;left: 55px;" >
        <span style="font-size: 18px;">影院</span>
        <img src="../assets/xz.png" alt="" @click="clickSearch" style="width: 18px;height: 18px;margin-right: 15px;">
      </div>

      <van-dropdown-menu active-color="#ff5f16">
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2"  @change="changeValue2"/>
        <van-dropdown-item v-model="value3" :options="option3" />
        </van-dropdown-menu>

        <div class="boxList" @click="clickCinemas(item.cinemaId)" style="margin-top: 25px;" v-for="item in store.cinemaList" :key="item.cinemaId">
            <div class="item">
                <span style="max-width: 80%;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;">{{ item.name }}</span>
                <span style="color: #ff5f16;">￥40</span>
            </div>
            <div class="item">
                <span style="color: #797d82;
                            font-size: 12px;
                            max-width: 80%;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                ">{{ item.address }}</span>
                <span style="color: #797d82;font-size: 12px;">大约:{{ Math.floor(item.Distance) }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import {onMounted, ref} from "vue"
import listStore from "../store/index"
import router from "../router/index"

    const value1 = ref(0);
    const value2 = ref(0);
    const value3 = ref(0)
    const option1 = [
      { text: '全城', value: 0 },
    ];
    const option2 = [
      { text: 'App订票', value: 0 },
      { text: '前台兑换', value: 1 },
    ];
    const option3 = [
      { text: '最近去过', value: 0 },
      { text: '离我最近', value: 1 },
    ];

    const store = listStore()

    onMounted(() =>{
        // 清空id数据
        store.filmId = 0
        store.bottom = true
        
        store.getCinemaList(store.cityId,store.ticketFlag);
    })

    const changeValue2 = (value) =>{
        if(value == 1) {
            store.ticketFlag = 2
            // console.log(store.ticketFlag);
            store.getCinemaList(store.cityId,store.ticketFlag)
            // console.log("1111",store.cinemaList);
            return
        }

        store.ticketFlag = 1
        store.getCinemaList(store.cityId,store.ticketFlag)
    }

    // 用户点击搜索按钮
    const clickSearch = () =>{
        
        store.bottom = false
        router.push("/cinemas/search")
        console.log("search");
    }

    // 点击城市回调
    const onToCity = (()=>{
        store.toListOrCinemas = false
        router.push("/city")
        store.bottom = false
    })

    // 用户点击每一个影院的回调
    const clickCinemas = ((cinemaId)=>{
        store.cinemaId = cinemaId
        router.push(`/cinemas/${cinemaId}/film`)
    })

</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px;
    width: 100vw;
    height: 5vh;
}
.item {
    display: flex;
    justify-content: space-between;
    align-items: center ;
    /* margin-top: 15px; */
    padding: 0 25px;
}

</style>